import React from 'react';
import { View, Text } from '@ray-js/ray';
import { Cell, CellGroup, DialogInstance } from '@ray-js/smart-ui';
import Strings from '../../i18n';
import styles from './index.module.less';

interface Props {
  note?: string;
  onChange?: (note: string) => void;
  style?: React.CSSProperties;
}

export default ({ note, style, onChange }: Props) => {
  const beforeClose = (
    action: 'cancel' | 'confirm' | 'overlay',
    value?: string
  ): Promise<boolean> =>
    new Promise(resolve => {
      setTimeout(() => {
        if (action === 'confirm') {
          // 修改这里，传递新的 value 值
          onChange && onChange(value || '');
          resolve(true);
        } else {
          // 拦截取消操作
          resolve(false);
        }
      }, 10);
    });

  const handleClick = () => {
    DialogInstance.input({
      title: 'Title',
      value: note,
      beforeClose,
      cancelButtonText: Strings.getLang('cancel'),
      confirmButtonText: Strings.getLang('confirm'),
    });
  };

  return (
    <View style={style}>
      <CellGroup className={styles.noteBox}>
        <Cell
          title={Strings.getLang('note')}
          value={note}
          isLink
          onClick={handleClick}
          customClass={styles.noteCell}
        />
      </CellGroup>
    </View>
  );
};
